<template>
  <img :src="img" alt="" />
  <div id="container"></div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
const img = import.meta.resolve("../assets/images/markerimg");
onMounted(() => {
  initMap2();
});
const initMap2 = () => {
  // 定义地图中心点坐标
  let center = new TMap.LatLng(36.65179100282374, 117.041494846344); // 坐标靠近中间
  // 定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(document.getElementById("container"), {
    center: center,
    zoom: 10,
  });
  //   //初始marker
  var marker = new TMap.MultiMarker({
    id: "marker-layer",
    map: map,
    styles: {
      // mark样式
      marker: new TMap.MarkerStyle({
        width: 198,
        height: 136.93,
        anchor: { x: 99, y: 136.93 },
        src: ""
      }),
    },
    geometries: [
      {
        id: "demo1",
        styleId: "marker",
        position: new TMap.LatLng(36.65179100282374, 117.041494846344),
      },
    ],
  });
  //初始化infoWindow
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 360px;
}
.abc {
  color: red;
}
</style>
